window.addEventListener("load", function () {
	// 模拟服务器上的传递过来的数据
	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];

	console.log(apiTypeData);
	//功能一:动态渲染API分类区
	//1.获取相关节点
	let html = ""; //声明一个空字符串
	apiTypeData.forEach(function (v, i) {
		if (i === 0) {
			html += `<li class="active" title=${v.keyword}>${v.name}</li>`;
		} else if (v.isnew) {
			html += `<li class="fw" title=${v.keyword}>${v.name}</li>`;
		} else {
			html += `<li title=${v.keyword}>${v.name}</li>`;
		}
	});
	//3.将拼接html结构放入对应的位置
	$(".api-list").innerHTML = html;
	//功能二:API分区点击后增加激活样式
	//1.获取相关节点
	//2.给li绑定点击事件
	$(".api-list li").forEach(function (v) {
		v.addEventListener("click", function () {
			//3.排他思想,先清除其他激活的li
			$(".api-list li").forEach(function (item) {
				item.classList.remove("active");
			});
			//4.再给当前被点击对象加激活样式
			this.classList.add("active");

			// 功能三:点击API分类区的标签, 联动下方的搜索框
			//1.将this的textContent赋值给strong
			$(".search strong").textContent = this.textContent;
			//2.将this的title赋值给搜索框的value
			$(".search input").value = this.title;
		});
	});

	//API列表区域 模拟服务器返回的数据
	let listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南1",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南2",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南3",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南4",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];

	//功能四:卡片区动态渲染
	//1.获取后台数据 , 进行遍历
	// let cardHtml = "";
	// listDataArr.forEach(function (v) {
	// 	//2.遍历时拼接为HTML结构
	// 	cardHtml += `
	//                 <li class="pr">
	// 					${v.isSpecial ? '<span class="pa">企业认证</span>' : ""}
	// 					<img src='../imgs/iocn/${v.img}' alt="图片已损坏" />
	// 					<p>${v.name}</p>
	// 					<p class=${v.isSpecial ? "f-r" : "f-g"}>${v.price}</p>
	// 					<a class="pa" href="#">申请数据</a>
	// 				</li>
	//                     `;
	// });
	// //3.将HTML结构放入指定位置
	// $(".cards-list").innerHTML = cardHtml;

	//功能五: 点击分页器的页码时,增加激活样式
	// 1.获取相关节点
	// 2.给页码绑定点击事件
	$("#sorter ul li").forEach(function (v) {
		v.addEventListener("click", function () {
			// 3.点击时先移除全部按钮的激活样式(排他思想)
			$("#sorter ul li").forEach(function (item) {
				item.classList.remove("active");
			});
			// 4.再给自己增加激活样式
			this.classList.add("active");
			//功能六: 点击分页区实现卡片区的分页
			render(Number(v.textContent), 5, listDataArr);
		});
	});

	//功能六: 点击分页区实现卡片区的分页
	console.log("第一页", listDataArr.slice(1, 5));
	console.log("第二页", listDataArr.slice(5, 10));
	console.log("第三页", listDataArr.slice(10, 15));
	console.log("第四页", listDataArr.slice(15, 20));
	//复用封函数,渲染函数

	//公式: (当前页码 - 1) * 每页条数
	function render(pagination, pageSize, arr) {
		//思路先对数据进行性处理,再执行函数
		//技巧:数据处理要和渲染分开考虑
		//对数据进行处理
		//求开始索引(当前页码 - 1) * 每页条数
		let startIndex = (pagination - 1) * pageSize;
		const result = arr.slice(startIndex, startIndex + pageSize);
		let cardHtml = "";
		//获取后台数据,开始遍历
		result.forEach(function (v) {
			//2.遍历时拼接为HTML结构
			cardHtml += `
                    <li class="pr">
						${v.isSpecial ? '<span class="pa">企业认证</span>' : ""}
						<img src='../imgs/iocn/${v.img}' alt="图片已损坏" />
						<p>${v.name}</p>
						<p class=${v.isSpecial ? "f-r" : "f-g"}>${v.price}</p>
						<a class="pa" href="#">申请数据</a>
					</li>
                        `;
		});
		//3.将HTML结构放入指定位置
		$(".cards-list").innerHTML = cardHtml;
	}
	//调用测试
	render(1, 5, listDataArr);

	// 功能七: 点击申请数据按钮弹出蒙层
	// 1.获取相关节点
	// 2.给公共的祖先元素cards-list绑定点击事件,事件委派
	$(".cards-list").addEventListener("click", function (e) {
		// 3.根据事件源的localName属性进行区分, a标签
		if (e.target.localName === "a") {
			// 4.弹出蒙层
			document.body.style.overflow = "hidden";
			$("#mask").style.display = "block";
		}
	});
	// 5.点击蒙层关闭蒙层
	$("#mask").addEventListener("click", function () {
		document.body.style.overflow = "auto";
		this.style.display = "none";
	});

	//6.阻止登录框事件传播
	$("#register-form").addEventListener("click", function (e) {
		e.stopPropagation();
	});

	// 功能八:点击模态框中的小标题按钮, 对应按钮要激活, 显示对应的form表单
	$("form")[0].style.display = "block";
	// 1.获取相关节点
	// 2.给小标题按钮绑定点击事件
	$(".s-title a").forEach(function (v, i) {
		v.addEventListener("click", function () {
			// 3.先排他移除所有小标题的激活样式
			$(".s-title a").forEach(function (item) {
				item.classList.remove("active");
			});
			// 4.再给当前点击的小标提标签加激活样式
			this.classList.add("active");

			// 5.排他, 移除所有显示的form表单
			$("form").forEach(function (each) {
				each.style.display = "none";
			});
			// 6.显示对应的form表单
			$("form")[i].style.display = "block";
		});
	});

	console.log("a", $(".s-title a"));
	console.log("form", $("form"));
});
